<%--
  Created by IntelliJ IDEA.
  User: LLS
  Date: 2019/12/12
  Time: 20:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>外部数据源</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/lib/layui/layui/css/layui.css"/>
    <script type="text/javascript" src="/lib/layui/layui/layui.js"></script>
    <script type="text/javascript" src="/lib/layui/layui/layui.all.js"></script>
    <script type="text/javascript" src="/js/news/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/lib/jquery-2.1.4.min.js"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>

</head>
<style type="text/css">
    .center{
        width: 80%;
        height: 100%;
        margin: 20px auto 0 auto;
        text-align:center;
    }
    .left_list{
        width: 20%;
        float: left;
    }
    .right_FormData{
        min-width: 55%;
        max-width: 70%;
        float: left;
        margin-left: 5%;
    }
    .layui-field-box{
        border: 1px solid #e6e6e6;
    }
    .layui-form-label {
        width: 120px !important;
    }
    .layui-form-label>span{
        color: #FF0000;
        margin-left: 10px;
        font-size: 16px;
    }
    .layui-elem-quote{
        border-left: 1px solid #e6e6e6;
    }
    .layui-quote-nm{
        padding:6px;
        border-radius: 8px;
        text-align: left;
    }
    .add_data{
        cursor: pointer;
    }
    .layui-quote-nm>i{
        font-size:18px;
        color: #108ee9;
        font-weight: bold;
        margin:0  5px 0 10px;
    }
    .nav{
        height:580px;
        overflow-y: auto;
    }
    /*滚动条样式*/
    .nav::-webkit-scrollbar {/*滚动条整体样式*/
        width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
        height:4px;
    }
    .nav::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(0,0,0,0.2);
    }
    .nav::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 0;
        background: rgba(0,0,0,0.1);
    }
    .nav li{
        height:30px;
        line-height: 30px;
        font-size: 16px;
        color: #333;
        padding:0px 10px;
        margin: 0 5px 5px 5px;
        border-radius: 3px;
        cursor: pointer;
        text-align: left;
    }
    .nav li:hover{
        background-color:#dbf4ff;
    }
    .nav li i{
        float:right;
        font-size:18px;
        color:#ff732d;
    }
    .nav li span{
        width:150px;
        font-size: 15px;
        display:inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .active{
        background-color:#dbf4ff;
    }
    .layui-input{
        width: 91%;
    }
    .layui-form-select{
        width: 38%;
        float:left;
    }
    .layui-form-select .layui-unselect{
        width: 100%;
    }
    .test_Connect{
        background:#fff;
        border:1px solid #e6e6e6;
        color:#333;
    }
    .test_Connect:hover{
        color:#333 !important;
    }
    #right{
        text-align: left;
    }
    .Attention{
        color:red;
        margin: 10px 0px;
    }
    .Explain{
        font-weight:bold;
    }
    .Explain_list{
        margin:0px 0px 20px 0;
        line-height:28px;
    }
    .Database{
        margin-right: 5px;
        vertical-align: top;
    }

    @font-face {font-family: "iconfont";
        src: url('iconfont.eot?t=1576846686042'); /* IE9 */
        src: url('iconfont.eot?t=1576846686042#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALIAAsAAAAABrAAAAJ5AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBOIFUATYCJAMICwYABCAFhG0HMRv7BciemjwpUkCECBWxvgHgCBHU74fuvf+CqBBlJKBGdlFxkdhKIGFaJViY1pXHs67+97/WBtXX9waJZ54wS+JpZf6Kz84ir1MiIRMSIdIscaHxLgVFFtMr9fZ/Lqc3mhzI/EA5zbH4qHccxVsDG2NQFFmBhN6HOOyVeZtArR5FIysHZ5cwLbMWBeLCtXWYzoVlWchVC5U1O7N4rkJ1epA+AM/C78c/9ZgmqShYDevn+xZs/WIXFPfKe459RIRA+ytQYArIxHZtetWYEFhjatPjBsC+aoNfytK3ir2ahPDXWdX1oAvF9yRxpbdanUDG4TngdFSC3NJkPXn1++fP4N7Xp4dfvkTc/3rw+a9r+dY/7nBjO5ZHVhdfvdAemlrfM79pxppCr/DQaG4+rH49sncGkrqSRuFs/+FDYA7vy3uKkaRN29/UzvZgC6AcFntjzf/1N16uDDprmvlfXZfBj34Kg+UwIy+oPrsn+IuSnk1Zl1m6dD1i8iRzmaAECkWfEix/q8FYfcct50O1jhv3VulOoVBtCM3UKahQZxoqVZuHWpMO99dpw8ZErsGEV4DQ7B2SRu+h0OwTzdQ/qNDpHyo1xxjU2o22E+uMhDu7zKQLWWi8oGvGkXJsMhvVnpOdBzpnZSH7mjhzY1grV4u5Q4qI51iTPdp1EYWK4xAP4D4KghgTjj0ypeyIJP1KRdW9qWzGIcxaxohOEAsyvEAuUyyi/PZitvT5c8SWC+i4hVATvEZYxh0d1ZRVe6CH6qgX4V5eyTyy1QmhIIXFQugAnCSw0zGU1E/zEJMoc0YkE30VIlN91eX1teHX7YBaliGFPbFQdenkXu7nAAAAAA==') format('woff2'),
        url('iconfont.woff?t=1576846686042') format('woff'),
        url('iconfont.ttf?t=1576846686042') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
        url('iconfont.svg?t=1576846686042#iconfont') format('svg'); /* iOS 4.1- */
    }

    .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-shujuku:before {
        content: "\e782";
    }


</style>
<body>

<div class="center">
    <div class="left_list">
        <blockquote class="layui-elem-quote layui-quote-nm add_data" ><i class="layui-icon layui-icon-add-1"></i>新增数据源</blockquote>
        <blockquote class="layui-elem-quote layui-quote-nm">
            <ul class="nav"></ul>
        </blockquote>
    </div>

    <div class="right_FormData">
        <div class="layui-field-box">
            <form class="layui-form" action="" lay-filter="example" id="data_form">
                <div class="layui-form-item">
                    <label class="layui-form-label"><span>*</span>ERP 数据源名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="" lay-verify="required" autocomplete="off" id="dbServerName" placeholder="请输入数据源名称  如:ERP系统数据源" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span>*</span>数据库类型</label>
                    <div class="layui-input-block layui-form" id="dbmsType">
                        <select name="interest" lay-filter="interestaihao">
                            <option value="MYSQL" id="type_MySQL">MYSQL</option>
                            <option value="SQL SERVER" id="type_SQLServer">SQL SERVER</option>
                            <option value="ORACLE" id="type_Oracle">ORACLE</option>
                        </select>

                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span>*</span>数据库编码格式</label>
                    <div class="layui-input-block">
                        <select name="dbDataBaseCharset" lay-filter="aihao" id="">
                            <option value="GBK">GBK</option>
                            <option value="UTF-8">UTF-8</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span>*</span>IP 地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="" lay-verify="required" autocomplete="off" id="dbServerIp" placeholder="请输入服务器的IP地址    如:192.168.0.1" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">IP 端口</label>
                    <div class="layui-input-block">
                        <input type="text" name="" lay-verify="" autocomplete="off" id="dbServerPort" placeholder="请输入端口号     如:1433" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" name="dbname">数据库名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="" lay-verify="" autocomplete="off" id="oracleType" placeholder="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span>*</span>用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" lay-verify="required" autocomplete="off" id="dbServerUser" placeholder="请输入用户名     如:root" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span>*</span>密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="" lay-verify="required" autocomplete="off" id="dbServerPass" placeholder="请输入密码,用于连接数据库验证" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn submit" lay-submit="" lay-filter="demo1">立即提交</button><button type="button" class="layui-btn test_Connect">测试连接</button>
                    </div>
                </div>
                <input type="hidden" id="serverId" name="">
            </form>
        </div>
        <div id="right">
            <p class="Attention">注：此模块功能专为技术支持和实施人员设定,客户请在相关技术人员的指导下配合使用!</p>
            <p class="Explain"><span>说明：</span></p>
            <div class="Explain_list">
                <p>第一步：  设置数据源，保存ERP系统数据源的配置信息,以供连接使用。</p>
                <p>第二步：  在已经配置好的数据源中配置相关的外部数据源列表信息。</p>
                <p>第三步：  工作流设计表单时，指定所需要使用的数据源信息。</p>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var table,form,layer; //layer实例参数 //初始化

    //数据源名称列表
    $.ajax({
        url: '/TerpServerController/selectDbServerNameTerpServer',
        type: 'get',
        dataType: 'json',
        success: function (data) {
            //判断是否有数据
            if(data.obj.length>0){
                for(var i=0;i<data.obj.length;i++){
                    var li='<li name="'+data.obj[i].serverId+'"><b class="iconfont Database">&#xe782;</b><span onclick="edit('+data.obj[i].serverId+')">'+data.obj[i].dbServerName+'</span><i class="layui-icon layui-icon-delete" onclick="dele('+data.obj[i].serverId+')"></i></li>'
                    $('.nav').append(li);
                }
                //新增数据源列表  添加背景色  默认第一行选中
                $('.nav li').first().addClass('active');
            }else{
                $('.nav').append('<li><span>暂无相关数据  ！</span></li>');
            }

            //新增数据源列表  默认显示第一行数据
            var default_data=document.getElementsByClassName('active')[0];
            edit($(default_data).attr('name'))
        },
        error: function (err) {
            layer.msg('请求数据异常   !', {icon: 5});
        }
    })

    //编辑数据源数据回显
    function edit(serverId){
        $.ajax({
            url: '/TerpServerController/selectDbServerNameTerpServer?serverId='+serverId,
            type: 'get',
            dataType: 'json',
            success: function (data) {
                $('#serverId').attr('name',data.obj[0].serverId);//serverId
                $('#dbServerName').val(data.obj[0].dbServerName);//ERP 数据源名称
                $('select[name="interest"]').val(data.obj[0].dbmsType);//数据库类型
                $('#dbServerIp').val(data.obj[0].dbServerIp);//IP 地址
                $('#dbServerPort').val(data.obj[0].dbServerPort);//IP 端口
                $('#oracleType').val(data.obj[0].dbDataBaseName);//数据库名称
                $('#dbServerUser').val(data.obj[0].dbServerUser);//用户名
                $('#dbServerPass').val(data.obj[0].dbServerPass);//密码
                $('select[name="dbDataBaseCharset"]').val(data.obj[0].dbDataBaseCharset); //编码格式
                form.render('select');
            },
            error: function (err) {
                layer.msg('请求数据异常   !', {icon: 5});
            }
        })
    }

    //删除数据源
    function dele(serverId){
        layer.confirm('您确定要删除吗？', {
            title:"数据源信息",
            btn: ['确定','取消'] //按钮
        }, function(){
            $.ajax({
                url: '/TerpServerController/deleteTerpServer?serverId='+serverId,
                type: 'get',
                dataType: 'json',
                success: function () {
                    layer.msg('删除成功', {icon: 1});
                    setTimeout(function(){
                        location.reload();
                    }, 1000);
                },
                error: function () {
                    layer.msg('删除失败', {icon: 2});
                }
            })
        });
    }

    // 测试连接
    $(".test_Connect").click(function () {
        var loading = layer.msg('正在连接中', {icon: 16, shade: 0.3, time:0});//加载中样式
        var data={
            dbmsType:$('select[lay-filter="interestaihao"]').val(),//数据库类型
            dbDataBaseCharset:$('select[name="dbDataBaseCharset"]').val(), //字符集类型
            dbServerIp:$('#dbServerIp').val(),//IP 地址
            dbServerPort:$('#dbServerPort').val(),//IP 端口
            dbServerUser:$('#dbServerUser').val(),//用户名
            dbServerPass:$('#dbServerPass').val(), //密码
            dbDataBaseName:$('#oracleType').val(),//数据库名称
        }

        $.ajax({
            url: '/TerpServerController/TerpServerConnectionTest',
            type: 'post',
            dataType: 'json',
            data:data,
            success: function (res) {
                layer.close(loading);//关闭加载中遮罩层
                if(res.flag){
                    layer.msg('连接成功', {icon: 1});
                }else{
                    layer.msg('连接失败', {icon: 2});
                }
            },
            error: function (err) {
                layer.msg('连接失败', {icon: 2});
            }
        })
    })


    //新增数据源  清空表单数据
    $('.add_data').click(function () {
        $('.layui-input').val('');
        $('#serverId').attr('name','');
        $('select[lay-filter="interestaihao"]').val('MySQL');
        $('select[name="dbDataBaseCharset"]').val('GBK');
    });

    //左侧数据源列表  添加选中效果
    $(document).on('click','.nav li',function(){
        $(this).siblings('li').removeClass('active');
        $(this).addClass('active');
    })

    layui.use(['layer', 'form', 'table'], function(){
        table = layui.table
            ,form = layui.form
            ,layer = layui.layer;
        form.render()

        // 表单重置
        $(".add_data").click(function () {
            form.render();
        })

        //监听下拉框
        form.on('select(interestaihao)', function(data){
            if(data.value == 'Oracle'){
                $('label[name="dbname"]').html('Oracle Net Manager服务命名');
            }else{
                $('label[name="dbname"]').html('数据库名称');
            }
        });

        //监听提交表单
        form.on('submit(demo1)', function(data){
            var data={
                dbServerName:$('#dbServerName').val(),//ERP 数据源名称
                dbmsType:$('#dbmsType input').val(),//数据库类型
                dbServerIp:$('#dbServerIp').val(),//IP 地址
                dbServerPort:$('#dbServerPort').val(),//IP 端口
                dbDataBaseCharset:$('select[name="dbDataBaseCharset"]').val(), //字符集
                dbDataBaseName:$('#oracleType').val(),//数据库名称
                dbServerUser:$('#dbServerUser').val(),//用户名
                dbServerPass:$('#dbServerPass').val()//密码
            }

            if($('#serverId').attr('name')!=""){
                data.serverId=$('#serverId').attr('name')
            }
            var loading = layer.msg('正在提交中...', {icon: 16, shade: 0.3, time:0});//加载中样式
            $.ajax({
                url: '/TerpServerController/insertTerpServer',
                type: 'post',
                dataType: 'json',
                data:data,
                success: function (res) {
                    if (res.flag){
                        layer.close(loading);//关闭加载中遮罩层
                        layer.msg('提交成功', {icon: 1});
                        setTimeout(function(){
                            location.reload();
                        }, 1500);
                    }
                },
                error: function (err) {
                    layer.msg('提交失败', {icon: 2});
                }
            })
            return false;
        });
    });

</script>
</html>
